<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" href="css/main.css" />
  <link rel="stylesheet" href="css/login.css" />
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
</head>

<body>
  <div class="main" id="login" v-cloak>
    <div class="ms-login">
      <div class="ms-title">后台管理系统</div>
      <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
        <el-form-item prop="user">
          <el-input v-model="param.account" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input type="password" placeholder="请输入密码" v-model="param.pwd" @keyup.enter.native="submitForm()">
          </el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm()" round>
            登录
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script>
  new Vue({
    el: '#login',
    data: {
      url: 'api.php',
      param: {
        account: '',
        pwd: '',
      },
      rules: {
        account: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
    },
    methods: {
      submitForm() {
        this.$refs.login.validate((valid) => {
          if (valid) {
            axios
              .post(this.url + '/admin/admin_login', this.param)
              .then((s) => {
                console.log(s.data)
                if (s.data.code === 10000) {
                  this.$message.success('登录成功')
                  window.localStorage.setItem('token', s.data.data.token_admin)
                  window.location.href = 'console.html'
                } else {
                  this.$message.error(s.data.message)
                }
              })
              .catch(() => {
                this.$message.error('异常错误，登陆失败')
              })
          } else {
            this.$message.error('请输入账号和密码')
            return false
          }
        })
      },
    },
  })
</script>

</html>